<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
  <!-- <link rel="stylesheet" href="stylesheets/reset.css"> -->
  <link rel="stylesheet" href="stylesheets/index.css">
</head>
<body>

<div id="app">
	<h1>{{ msg }}</h1>
	<hr>
	<div>
		用户名: <input type="text" v-model="userinfo.uname">
	</div>
	<div>
		密码: <input type="password" v-model="userinfo.pwd">
	</div>
	<div>
		性别: 
		<label>
			<input type="radio" value="男" v-model="userinfo.sex">男
		</label>
		<label>
			<input type="radio" value="女" v-model="userinfo.sex">女
		</label>
		<label>
			<input type="radio" value="未知" v-model="userinfo.sex">未知
		</label>
	</div>
	<div>
		爱好:
		<label>
			<input type="checkbox"  value="速滑" v-model="userinfo.aihao">速滑
		</label>
		<label>
			<input type="checkbox" value="单板" v-model="userinfo.aihao">单板
		</label>
		<label>
			<input type="checkbox" value="短单" v-model="userinfo.aihao">短单
		</label>
	</div>
	<div>
		城市:
		<select v-model="userinfo.city">
			<option>西安</option>
			<option>咸阳</option>
			<option>上海</option>
		</select>
	</div>
	<div>
		个性签名:
		<textarea v-model="userinfo.desc"></textarea>
	</div>
	<div>
		<input  v-model="userinfo.isAgree" type="checkbox" >同意流氓协议
	</div>
	<div>
		<button @click="handleUserInfo">提交</button>
	</div>
	
	
	
	
	
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<!-- <input type="text" :value="msg" @input="handleChange"> -->
	<!-- <input type="text" v-model="msg"> -->
	<input type="text" v-model.trim="msg">
	<br>
	<!-- <input type="text" v-model.lazy="msg"> -->
	<br>
	<!-- <input type="number" v-model.number="msg"> -->
	<br>
	<!-- <textarea v-model="msg"></textarea> -->
	<br>
	<!-- 单个复选框 boolean -->
	<input type="checkbox" id="checkbox" v-model="checked">
	<label for="checkbox">{{ checked }}</label>
	<br>
	<!-- 多个复选框 [] -->
	<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
	<label for="jack">Jack</label>
	<input type="checkbox" id="john" value="John" v-model="checkedNames">
	<label for="john">John</label>
	<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
	<label for="mike">Mike</label>
	<br>
	<span>Checked names: {{ checkedNames }}</span>
	<br>
	<input
	  type="checkbox"
	  v-model="toggle"
	  true-value="yes"
	  false-value="no"
	>
	<span>{{ toggle }}</span>
	<h2>单选</h2>
	<label>
		<input type="radio" value="nan" v-model="sex">
		<span>男</span>
	</label>
	<label>
		<input type="radio" value="nv" v-model="sex">
		<span>女</span>
	</label>
	<p>{{sex}}</p>
	<h2>下拉选择</h2>
	<select v-model="city">
		<option disabled="disabled">----</option>
		<option value="6101">西安</option>
		<option value="6102">宝鸡</option>
		<option value="6103">商洛</option>
		<option value="6104">咸阳</option>
	</select>
	<span>{{ city }}</span>
	<br>
	<select v-model="selected" multiple style="width: 50px;">
	    <option>A</option>
	    <option>B</option>
	    <option>C</option>
	  </select>
	  <br>
	  <span>Selected: {{ selected }}</span>
	<br>
	<button @click="handleSubmit">提交</button>
</div>

<script src="./vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
